<template>
    <view class="page">
        <st-uni-tab-control :current="current" :values="items" bgc="#fff" :fixed="true" :isEqually='true' @clickItem="onClickItem"/>
        <!-- 使用 swiper 配合 滑动切换 -->
        <view class="content">
          <st-uni-loadmore ref="loadmoreVisitRef">
            <view v-show="current === 0">
                    <uni-list :border="true">
                        <uni-list-chat v-for=" item in listData" :avatar-circle="true" :title="item.nickname"
                                       :key="item.id"
                                       :avatar="item.avatar" :note="item.gender" :time="item.createAt"
                                       @click="$utils.n.ngt('/pages/detail/detail?userId=' + item.userId)"
                                       clickable/>
                    </uni-list>
            </view>
            <view v-show="current === 1">
                    <uni-list :border="true">
                        <uni-list-chat v-for=" item in listData" :avatar-circle="true"
                                       :title="item.visitNickname"
                                       :key="item.id"
                                       :avatar="item.visitAvatar" :note="item.visitGender" :time="item.createAt"
                                       @click="$utils.n.ngt('/pages/detail/detail?userId=' + item.visitUserId)"
                                       clickable/>
                    </uni-list>
            </view>
          </st-uni-loadmore>
        </view>
    </view>
</template>

<script>
    import StUniTabControl from "../../components/st-uni-tab-control/StUniTabControl"
    import StUniLoadmore from "../../components/StUniLoadmore"

    export default {
        components: {StUniTabControl, StUniLoadmore},
        data() {
            return {
                current: 0,
                items: [
                    '谁看过我',
                    '我看过谁'
                ],
                searchVisitMeForm: {
                    neUserId: this.$store.state.userInfo.id,
                    visitUserId: this.$store.state.userInfo.id,
                    orderBy: 'createAt-0'
                },
                searchMeVisitForm: {
                    userId: this.$store.state.userInfo.id,
                    neVisitUserId: this.$store.state.userInfo.id,
                    orderBy: 'createAt-0'
                },
                listData: []
            };
        },
        onPullDownRefresh() {
            this.loadData(true)
        },
        onReachBottom() {
            this.loadData(false)
        },
        onLoad() {
            this.readVisit()
        },
        onReady() {
            this.loadData(true)
        },
        methods: {
            onClickItem(e) {
                if (this.current !== e.currentIndex) {
                    this.current = e.currentIndex
                }
                this.listData = []
                this.loadData(true)
            },
            loadData(pullDownRefresh) {
              if (!this.$refs.loadmoreVisitRef) {
                return
              }

              this.$refs.loadmoreVisitRef.loadData('/user-visit/visit-me/getPage', {
                pullDownRefresh: !!pullDownRefresh,
                data: this.current == 0 ? this.searchVisitMeForm: this.searchMeVisitForm
              }).then(res => {
                let content = res.data.records
                if (pullDownRefresh) {
                  this.listData = content
                } else {
                  this.listData = this.listData.concat(content);
                }
              })
            },
            readVisit() {
                this.$http.put('/user-visit/read')
            }
        }
    }
</script>

<style>
    page{
        height: 100%;
    }
    .page{
        padding-top: 98rpx;
        height: 100%;
    }
</style>
